<template>
    <div style="width: 100%;">
        <el-row :gutter="24">
            <!-- <el-col :span="10" class="ba-array-value">品牌ID</el-col> -->
            <el-col :span="12" class="ba-array-key">{{ state.oneTitle }}</el-col>
            <el-col :span="6" class="ba-array-value">{{ state.twoTitle }}</el-col>
            <el-col :span="6" class="ba-array-value">{{ state.threeTitle }}</el-col>
            
        </el-row>
        <el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
            <el-col :span="10" style="display: none;">
                <el-input v-model="item.id" type="number"></el-input>
            </el-col>
            <el-col :span="12">
                <el-input v-model="item.name_supplier" :disabled="true" input-style="text-align: center"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="item.specification_supplier" :disabled="true" input-style="text-align: center"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="item.number" type="string" input-style="text-align: center"></el-input>
            </el-col>
        </el-row>
        
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'

type baInputArray = { id: number; name_supplier: string; number: number }
interface Props {
    modelValue: baInputArray[]
    oneTitle?: string
    twoTitle?: string
    threeTitle?: string
    // 隐藏删除按钮
    hideDeleteBtn?: boolean
    // 隐藏添加按钮
    hideAddBtn?: boolean
}

const { t } = useI18n()

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    oneTitle: '',
    twoTitle: '',
    threeTitle: ''
})

const state = reactive({
    value: props.modelValue,
    oneTitle: props.oneTitle ? props.oneTitle : t('utils.ArrayKey'),
    twoTitle: props.twoTitle ? props.twoTitle : t('utils.ArrayValue'),
    threeTitle: props.threeTitle ? props.threeTitle : t('utils.ArrayValue'),
})



watch(
    () => props.modelValue,
    (newVal) => {
        state.value = newVal
    }
)
</script>

<style scoped lang="scss">
.ba-array-key,
.ba-array-value {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    color: var(--el-text-color-secondary);
}
.ba-array-item {
    margin-bottom: 6px;
}
.ba-add-array-item {
    float: right;
}

.el-form--inline .el-input{
    width: 100%;
    text-align: center;
}
.el-form--inline .el-input input{
    width: 100%;
    text-align: center;
}
[class*=el-col-].is-guttered {
    display: block;
    min-height: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 5px 0; */
}

</style>
